<template>
  <div class="home">
    <div class="table">
      <el-table v-loading="isLoading" border :data="listData" style="width: 100%">
        <el-table-column align="center" prop="archMainCode" label="档案编号" />
        <el-table-column align="center" prop="archTitle" label="档案名" />
        <el-table-column align="center" prop="archPeriod" label="保管期(月)">
          <template slot-scope="scope">
            <span v-if="scope.row.archPeriod === 0">永久</span>
            <span v-else>{{ scope.row.archPeriod }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="archRequireOther" label="档案规范其他需求" width="160">
        </el-table-column> -->
        <el-table-column align="center" label="归档状态">
          <template slot-scope="scope">
            <span v-if="scope.row.archState === 0" class="warning">预归档</span>
            <span v-if="scope.row.archState === 1" class="primary">接收待审核</span>
            <span v-if="scope.row.archState === 3" class="danger">驳回</span>
            <span v-if="scope.row.archState === 5" class="success">归档接受</span>
            <span v-if="scope.row.archState === 10" class="info">档案封存</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="档案访问许可">
          <template slot-scope="scope">
            <span v-if="scope.row.accessState === 0">公开</span>
            <span v-else>隐藏</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="visitCount"
          label="浏览次数"
        />
        <el-table-column
          align="center"
          prop="borrowCount"
          label="借阅次数"
        />
        <!-- <el-table-column align="center" prop="notes" label="备注"> </el-table-column> -->
        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="detail(scope.row)">详情</el-button>
            <!-- <el-button type="primary" size="small" @click="borrow(scope.row)"
              >借阅</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="详情" :visible.sync="detailDialog" width="45%">
      <el-form :model="selectRow" label-position="right" label-width="140px">
        <!-- <el-form-item label="档案交付单位">
      <span>{{ selectRow.delivUnit }}</span>
    </el-form-item> -->
        <!-- <el-form-item label="档案分类">
      <span>{{ selectRow.archCateName }}</span>
    </el-form-item> -->
        <el-form-item label="档案名称">
          <div class="item-div">{{ selectRow.archTitle }}</div>
        </el-form-item>
        <el-form-item label="档案编号">
          <div class="item-div">{{ selectRow.archMainCode }}</div>
        </el-form-item>
        <el-form-item label="热点标签">
          <el-tag v-if="selectRow.archDeptHotName" type="success">{{
            selectRow.archDeptHotName
          }}</el-tag>
          <span v-else>暂无热点标签</span>
        </el-form-item>
        <el-form-item label="档案保管期(月)">
          <div class="item-div">
            {{ selectRow.archPeriod === 0 ? "永久" : selectRow.archPeriod }}
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-if="selectRow.notes"
            v-model="selectRow.notes"
            class="input form-width"
            type="textarea"
            :rows="3"
          />
          <span v-else>暂无备注</span>
        </el-form-item>
        <!-- <el-form-item label="档案规范其他需求">
    <el-input v-model="addForm.archRequireOther"></el-input>
  </el-form-item> -->
        <el-form-item label="档案附件">
          <div v-for="item in fileList" :key="item.archFilesId">
            <el-link type="primary">{{ item.fileName }}</el-link>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  qryAllArchMainByType,
  updateCount,
  queryFilesById
} from '@/api/archManage'
import { addArchApplication } from '@/api/archApplication'
export default {
  data() {
    return {
      userInfo: {},
      authType: '',
      isLoading: false,
      digitalData: [],
      searchForm: {
        archDeptClassName: '',
        archMainCode: '',
        archTitle: '',
        delivUnit: '',
        archPeriod: '',
        archRequireOther: '',
        archState: '',
        auditors: '',
        accessState: '',
        notes: ''
      },
      addForm: {
        archDeptClassName: '',
        archMainCode: '',
        archTitle: '',
        delivUnit: '',
        archPeriod: '',
        archRequireOther: '',
        archState: '',
        auditors: '',
        accessState: '',
        notes: ''
      },
      listData: [],
      detailDialog: false,
      selectRow: {},
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      fileList: []
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.authType = sessionStorage.getItem('authType')
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize,
        archState: '',
        accessState: -1,
        staffCode: this.userInfo.username
          ? this.userInfo.username
          : this.userInfo.staffCode
      }
      qryAllArchMainByType(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    addCurArch() {
      this.$router.push('/archManage/currentArchiving')
    },
    detail(row) {
      // 更新浏览和借阅次数
      updateCount({ type: 1, archMainId: row.archMainId })
      this.selectRow = row
      this.detailDialog = true
      queryFilesById({ archMainCode: row.archMainCode })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data

            // console.log(this.fileList);
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
    },
    borrow(row) {
      this.$prompt('请输入借阅天数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\+?[1-9]\d*$/,
        inputErrorMessage: '请输入正整数'
      }).then(({ value }) => {
        addArchApplication({
          during: value,
          staffCode4App: this.userInfo.username
            ? this.userInfo.username
            : this.userInfo.staffCode,
          appState: 0,
          archMainId: row.archMainId,
          archMainCode: row.archMainCode
        }).then((res) => {
          if (res.code === '0') {
            this.$message({
              type: 'success',
              message: '已发起借阅申请，请联系负责人进行审核'
            })
          }
        })
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}

.search-input {
  width: 200px;
}

.table {
  height: 80%;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.form-width {
  width: 80%;
}
.item-div {
  padding: 0px 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 80%;
}
.danger{
  color: #F56C6C;
}
.primary{
  color: #409EFF;
}
.success{
  color: #67C23A;
}
.warning{
  color: #E6A23C;
}
.info{
  color: #909399;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
